<template>
    <div class="integral_index">
        <div><banner :list="banner" :height="350" /></div>

        <!-- 搜索条件 S -->
        <div class="goods_where w1200" style="margin-top:30px">
            <div class="item">
                <div class="title">商品分类：</div>
                <div class="list">
                    <div class="first">
                        <ul>
                            <li :class="($isEmpty(base64Decode.pid) || base64Decode.pid==0)?'red':''" @click="classChange(0,{},3)">全部</li>
                            <li :class="(!$isEmpty(base64Decode.pid) && base64Decode.pid==v.id)?'red':''" v-for="(v,k) in common.classes" :key="k" @click="classChange(v.id,v)">{{v.name}}</li>
                        </ul>
                    </div>
                    <div class="sec" v-for="(v,k) in common.classes" :key="k">
                        <ul v-if="(!$isEmpty(base64Decode.pid) && base64Decode.pid==v.id)">
                            <li :class="(!$isEmpty(base64Decode.sid) && base64Decode.sid==vo.id)?'red':''" v-for="(vo,key) in v.children" @click="classChange(v.id,vo,1)" :key="key">{{vo.name}}</li>
                        </ul>
                        <div v-if="(!$isEmpty(base64Decode.pid) && base64Decode.pid==v.id)">
                            <div  v-for="(vo,key) in v.children" :key="key">
                                <ul style="margin-top:0" v-if="(!$isEmpty(base64Decode.sid) && base64Decode.sid==vo.id)">
                                    <li :class="(!$isEmpty(base64Decode.tid) && base64Decode.tid==voo.id)?'red':''" v-for="(voo,keys) in vo.children" :key="keys" @click="classChange(v.id,voo,2,vo.id)">{{voo.name}}</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <!-- <div class="sec" v-for="(v,k) in common.classes" :key="k">
                        <ul v-if="(!$isEmpty(base64Decode.pid) && base64Decode.pid==v.id)">
                            <li  v-for="(vo,key) in v.children" :key="key">{{vo.name}}</li>
                        </ul>
                    </div> -->
                </div>
            </div>
            <div class="item">
                <div class="title">品牌筛选：</div>
                <div class="list">
                    <div class="first">
                        <ul>
                            <li :class="($isEmpty(base64Decode.brand_id) || base64Decode.brand_id==0)?'red':''" @click="brandChange(0)" >全部</li>
                            <li :class="(!$isEmpty(base64Decode.brand_id) && base64Decode.brand_id==v.id)?'red':''" v-for="(v,k) in common.brands" :key="k"  @click="brandChange(v.id)">{{v.name}}</li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="item">
                <div class="title">筛选排序：</div>
                <div class="list">
                    <div class="other">
                        <ul>
                            <li @click="sortChange('')" :class="($isEmpty(base64Decode.sort_type) || base64Decode.sort_type=='')?'red':''"
                                >默认
                                <div class="sorts">
                                    <a-icon :class="(($isEmpty(base64Decode.sort_order) || base64Decode.sort_order=='asc') && ($isEmpty(base64Decode.sort_type) || base64Decode.sort_type==''))?'caret red':'caret'" type="caret-up" />
                                    <a-icon :class="((!$isEmpty(base64Decode.sort_order) && base64Decode.sort_order=='desc') && ($isEmpty(base64Decode.sort_type) || base64Decode.sort_type==''))?'caret red':'caret'" type="caret-down" />
                                </div>
                            </li>
                            <li @click="sortChange('goods_price')" :class="(!$isEmpty(base64Decode.sort_type) && base64Decode.sort_type=='goods_price')?'red':''">
                                价格
                                <div class="sorts">
                                    <a-icon :class="((!$isEmpty(base64Decode.sort_order) && base64Decode.sort_order=='asc') && (!$isEmpty(base64Decode.sort_type) && base64Decode.sort_type=='goods_price'))?'caret red':'caret'" type="caret-up" />
                                    <a-icon :class="((!$isEmpty(base64Decode.sort_order) && base64Decode.sort_order=='desc') && (!$isEmpty(base64Decode.sort_type) && base64Decode.sort_type=='goods_price'))?'caret red':'caret'" type="caret-down" />
                                </div>
                            </li>
                            <li @click="sortChange('goods_sale')" :class="(!$isEmpty(base64Decode.sort_type) && base64Decode.sort_type=='goods_sale')?'red':''">
                                销量
                                <div class="sorts">
                                    <a-icon :class="((!$isEmpty(base64Decode.sort_order) && base64Decode.sort_order=='asc') && (!$isEmpty(base64Decode.sort_type)  &&  base64Decode.sort_type=='goods_sale'))?'caret red':'caret'" type="caret-up" />
                                    <a-icon :class="((!$isEmpty(base64Decode.sort_order) && base64Decode.sort_order=='desc') && (!$isEmpty(base64Decode.sort_type)  &&  base64Decode.sort_type=='goods_sale'))?'caret red':'caret'" type="caret-down" />
                                </div>
                            </li>
                            <li @click="sortChange('order_comment_count')" :class="(!$isEmpty(base64Decode.sort_type) && base64Decode.sort_type=='order_comment_count')?'red':''">
                                评论
                                <div class="sorts">
                                    <a-icon :class="((!$isEmpty(base64Decode.sort_order) && base64Decode.sort_order=='asc') && (!$isEmpty(base64Decode.sort_type)  &&  base64Decode.sort_type=='order_comment_count'))?'caret red':'caret'" type="caret-up" />
                                    <a-icon :class="((!$isEmpty(base64Decode.sort_order) && base64Decode.sort_order=='desc') && (!$isEmpty(base64Decode.sort_type)  &&  base64Decode.sort_type=='order_comment_count'))?'caret red':'caret'" type="caret-down" />
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <!-- 搜索条件 E -->

        <div class="s_goods_content w1200" v-if="params.total>0">
            <!-- 产品列表 S -->
            <div class="s_goods_list">
                <div class="item" v-for="(v,k) in list" :key="k">
                    <dl><router-link :to="'/goods/'+v.id">
                        <dt><img width="180px" height="180px" v-lazy="v.goods_master_image" :alt="v.goods_name"></dt>
                        <dd class="title">{{v.goods_name}}</dd>
                        <dd class="price">￥{{v.goods_price}} <font>拼团价</font></dd>
                        <dd>
                            <span>立即购买</span>
                            <span>{{v.need}} 人成团</span>
                        </dd></router-link>
                    </dl>
                </div>
                <div class="clear"></div>
            </div>
            <!-- 产品列表 E -->

            <div class="fy">
                <a-pagination v-model="params.page" :default-page-size="params.per_page" :total="params.total" @change="onChange" />
            </div>
        </div>
        <a-empty style="margin-top:40px" v-else />

    </div>
</template>

<script>
import banner from '@/components/home/public/banner'
import {mapState} from 'vuex'
export default {
    components: {banner},
    props: {},
    data() {
      return {
          params:{
              page:1,
              per_page:30,
              total:0,
              is_collective:1,
          },
          list:[],
          banner:[],
          base64Code:'',
          base64Decode:{},
      };
    },
    watch: {},
    computed: {...mapState('homeCommon',['common'])},
    methods: {
        // 初始化数据
        onload(){
            this.params.params = this.base64Code;
            this.$post(this.$api.homeGoods+'/search/all',this.params).then(res=>{
                if(res.code == 200){
                    this.params.total = res.data.total;
                    this.params.per_page = res.data.per_page;
                    this.params.current_page = res.data.current_page;
                    this.list = res.data.data;
                    // console.log(this.params);
                }else{
                    this.$message.error(res.msg);
                }
                
            })
            console.log(this.base64Decode)
        },
        onChange(e){
            this.params.page = e;
            this.onload();
        },
        // 分类改变
        classChange(pid,info,deep=0,sid=0){
            this.base64Decode.class_id = [];
            this.base64Decode.pid = pid;
            if(deep == 0){
                info.children.forEach(item=>{
                    if(!this.$isEmpty(item.children)){
                        item.children.forEach(item2=>{
                            this.base64Decode.class_id.push(item2.id);
                        })
                    }
                })
                this.base64Decode.sid = undefined;
                this.base64Decode.tid = undefined;
            }
            if(deep == 1){
                this.base64Decode.sid = info.id;
                if(!this.$isEmpty(info.children)){
                    info.children.forEach(item=>{
                        this.base64Decode.class_id.push(item.id);
                    })
                }else{
                    this.base64Decode.class_id = [0];
                }
                this.base64Decode.tid = undefined;
            }
            if(deep == 2){
                this.base64Decode.sid = info.pid;
                this.base64Decode.tid = info.id;
                this.base64Decode.class_id.push(info.id);
            }
            if(deep == 3){
                this.base64Decode.pid = undefined;
                this.base64Decode.tid = undefined;
                this.base64Decode.tid = undefined;
                this.base64Decode.class_id = undefined;
            }
            this.$router.push('/s/'+window.btoa(JSON.stringify(this.base64Decode)))
        },
        // 品牌改变
        brandChange(e){
            this.base64Decode.brand_id = e;
            this.$router.push('/s/'+window.btoa(JSON.stringify(this.base64Decode)))
        },
        // 排序
        sortChange(e=''){
            if(e == ''){
                if(this.base64Decode.sort_order== 'desc'){
                    this.base64Decode.sort_order= 'asc';
                }else{
                    this.base64Decode.sort_order= 'desc';
                }
                if(this.base64Decode.sort_type != undefined){
                    this.base64Decode.sort_order= 'asc';
                }
                this.base64Decode.sort_type = undefined
            }else{
                if(this.base64Decode.sort_type == undefined || this.base64Decode.sort_type != e){
                    this.base64Decode.sort_order= 'asc';
                }else{
                    if(this.base64Decode.sort_order== 'desc'){
                        this.base64Decode.sort_order= 'asc';
                    }else{
                        this.base64Decode.sort_order= 'desc';
                    }
                }
                
                this.base64Decode.sort_type= e;
                console.log(this.base64Decode.sort_type)
            }
            this.$router.push('/s/'+window.btoa(JSON.stringify(this.base64Decode)))

        }
    },
    created() {
        if(this.$route.params.params != undefined){
            this.base64Code = this.$route.params.params;
            this.base64Decode = JSON.parse(window.atob(this.base64Code));
            this.onload();
        }
        this.$get(this.$api.homeGoods+'/collection/banner').then(res=>{
            if(res.code == 200){
                this.banner = res.data;
            }
            
        })
    },
    mounted() {},
    beforeRouteUpdate (to, from, next) {
        if(from.params.params != to.params.params){
            this.params.page = 1;
            this.base64Code = to.params.params;
            this.base64Decode = JSON.parse(window.atob(to.params.params));
            this.onload();
            // this.goods_id = to.params.id;
            // this.get_goods_info();
        }
        next();
        // react to route changes...
        // don't forget to call next()
    }
};
</script>
<style lang="scss" scoped>
.goods_where{
    border: 1px solid #efefef;
    line-height: 50px;
    font-size: 14px;
    .item{
        padding:0 20px;
        box-sizing: border-box;
        border-bottom: 1px solid #efefef;
        &:last-child{
            border-bottom: none;
        }
        &:after{
            clear:both;
            display: block;
            content:'';
        }
        .title{
            float: left;
            margin-right: 20px;
        }
        .list{
            float: left;
            ul li{
                cursor: pointer;
            }
            .first{
                &:after{
                    clear: both;
                    display: block;
                    content:'';
                }
                ul li{
                    background: #efefef;
                    line-height: 30px;
                    padding:0 10px;
                    margin-top: 10px;
                    text-align: center;
                    float: left;
                    margin-right: 20px;
                    border-radius: 3px;
                    &:hover{
                        color:#fff;
                        background-color:#ca151e;
                    }
                    &.red{
                       color:#fff;
                       background-color:#ca151e; 
                    }
                }
            }
            .sec{
                ul{
                    border-top: 1px dashed #e1e1e1;
                    margin-top: 20px;
                    &:after{
                        clear:both;
                        display: block;
                        content:'';
                    }
                }
                ul li{
                    float: left;
                    margin-right: 20px;
                    padding:0 10px; 
                    line-height: 40px;
                    color: #666;
                    font-size: 12px;
                    &:hover{
                        color:#ca151e;
                    }
                    &.red{
                       color:#ca151e;
                    }
                }
                &:after{
                    clear: both;
                    display: block;
                    content:'';
                }
            }
            .other{
                ul li{
                    float: left;
                    margin-right: 20px;
                    padding:0 10px;
                    position: relative;
                    &:hover{
                        color:#ca151e;
                    }
                    &.red{
                       color:#ca151e;
                    }
                    .sorts{
                        position: absolute;
                        top:0;
                        right: 0;
                        color:#666;
                        .caret{
                            font-size: 12px;
                            position: absolute;
                            -webkit-transform-origin-x: 0; //缩小后文字居左
                            -webkit-transform: scale(0.80);   //关键
                            &:first-child{
                               top:16px;
                               right:-5px; 
                            }
                            &:last-child{
                               top:22px;
                               right:-5px; 
                            }
                            &.red{
                                color:#ca151e;
                            }
                        }
                    }
             
                }
            }
        }
    }
}
</style>